const { Configuration } = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

/**
 *
 * @type {Configuration} 开启配置智能提示
 */
const config = {
  mode: "development",
  entry: "./src/main.ts",
  output: {
    filename: "[chunkhash].js", // 防止命名冲突
    path: path.resolve(__dirname, "dist"), // 生成目录
    clean: true, // 每次打包前清除之前的打包目录
  },
  stats: "errors-only", // 控制台只打印错误信息
  plugins: [
    // html 插件 使 html 文件与 webpack 关联起来
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    // 识别 vue 文件
    new VueLoaderPlugin(),
    // 分割 css 模块
    new MiniCssExtractPlugin(),
  ], // webpack的插件都是 class 需要 new
  module: {
    rules: [
      // 支持 .ts 文件
      {
        test: /\.ts$/,
        // use: "ts-loader",
        use: {
          loader: "ts-loader",
          // ts-loader 文档中的配置
          options: {
            appendTsSuffixTo: [/\.vue$/], // 支持 .vue 中的 ts 代码
          },
        }, // 处理文件使用 loader
      },
      // 1. vue-loader 2. .vue 文件声明(shim.d.ts) 3. VueLoaderPlugin 插件配置(支持 Vue3)
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.css$/,
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, "css-loader"], // 打包抽离 css 文件
      },
      {
        test: /\.less$/,
        // use: ['style-loader', 'css-loader', 'less-loader']
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  // 分模块打包
  optimization: {
    splitChunks: {
      cacheGroups: {
        moment: {
          name: "moment",
          chunks: "all",
          test: /[\\/]node_modules[\\/]moment[\\/]/,
        },
        // 抽离公共依赖
        common: {
          name: "common",
          chunks: "all",
          minChunks: 2, // 依赖的引用次数大于2个才会被抽离
        },
      },
    },
  },
};
module.exports = config;
